<template>
  <div>
    <div class="box_table">
<!--      下面是面包屑相关的东西-->
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      </el-breadcrumb>
<!--      添加按钮-->
      <el-button type="primary" plain size="medium" @click="tianjiaTanChuang()"
                 style="float: right;margin-bottom: 10px;margin-top: 10px">添加
      </el-button>
      <el-table
          :data="categoryData" border
          height="500"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
        >
        </el-table-column>
        <el-table-column
            prop="code"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="一级分类字段">
        </el-table-column>
        <el-table-column
            prop="brand"
            label="推荐品牌">
          <template slot-scope="s">
          <el-tag v-for="item in s.row.brands">
            {{item.brandName}}
          </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status"
                         label="是否显示">
          <template slot-scope="scope">
            <!--switch 开关 组件-->
            <el-switch
                @change="alterSwitch(scope.row)"
                :active-value="true"
                :inactive-value="false"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="addTime"
            label="添加时间">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" plain icon="el-icon-chat-dot-round" circle size="small"
                       @click="chaKan(scope.row.id)"></el-button>
            <el-button type="primary" plain icon="el-icon-edit" circle size="small"
                       @click="xiuGai(scope.row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                       @click="deleteCategoryById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页相关的内容-->
<!--      <center>-->
<!--        <el-pagination-->
<!--            background-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="categoryData.page"-->
<!--            :page-size="categoryData.pageSize"-->
<!--            layout="prev, pager, next"-->
<!--            :total="categoryData.total"-->
<!--            style="position: fixed;left: 50%;top: 83%">-->
<!--        </el-pagination>-->
<!--      </center>-->
    </div>
<!--    下面都是弹出层-->
<!--    添加的弹出层-->
    <el-dialog title="添加一级分类" :visible.sync="dialogFormVisible" center width="37%">
      <el-form :model="category">
        <el-form-item label="一级分类字段" :label-width="formLabelWidth" style="width: 500px">
          <el-input v-model="category.name" autocomplete="off" placeholder="请输入一级分类字段"></el-input>
        </el-form-item>

        <el-form-item label="二级分类字段" :label-width="formLabelWidth" style="width: 500px">
          <el-input v-model="category2.name" autocomplete="off" placeholder="请输入二级分类字段"></el-input>
        </el-form-item>

        <el-upload
            class="avatar-uploader"
            action="/category/upload"
            name="categoryImg"
            :show-file-list="false"
            ref="upload"
            :on-change="handleChange"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">点击上传分类图片</i>
        </el-upload>
        <el-button style="margin-left: 38.5%;" size="small" type="success" @click="addItem"
                   v-if="category2.name.length!=0">添加
        </el-button>
        <el-button style="margin-left: 38.5%;" size="small" type="info" @click="alertWarning"
                   v-if="category2.name.length==0">添加
        </el-button>
        <div class="categories" v-if="category.categories.length!=0">
          <el-row>
            <el-col :span="8" v-for="(item,i) in category.categories">
              <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                <img :src="item.picUrl" class="image">
                <div>
                  <p style="text-align: center">{{ item.name}}</p>
                  <div class="bottom clearfix">
                    <center>
                      <el-button type="text" class="button" style="color: red;font-size: 12px" @click="delSceneChild(i)">
                        删除
                      </el-button>
                    </center>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div>
        请选择二级栏目推荐品牌：
        <el-table
            :data="brand1"
            height="250"
            border
            style="width:605px">
          <el-table-column
              prop="brandCode"
              label="编号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="brandName"
              label="名称"
              width="200">
          </el-table-column>
          <el-table-column
              label="操作"
              width="200">
            <template slot-scope="scope">
              <el-button type="primary" plain icon="el-icon-minus" circle size="small"
                         @click="delBrand(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br>
      <div>
        <el-form v-model="findBrands">
          品牌编号:
          <el-input v-model="findBrands.brandCode" style="width: 25%"></el-input>
          品牌名称:
          <el-input v-model="findBrands.brandName" style="width: 25%"></el-input>
          <el-button type="primary" plain @click="findBrand()">查找</el-button>
        </el-form>
      </div>
        <div>
          <el-table
              :data="brand"
              height="250"
              border
              style="width:604px">
            <el-table-column
                prop="brandCode"
                label="编号"
                width="200">
            </el-table-column>
            <el-table-column
                prop="brandName"
                label="名称"
                width="200">
            </el-table-column>
            <el-table-column
                label="是否关联"
                width="200">
              <template slot-scope="scope">
                <el-button type="primary" plain icon="el-icon-plus" circle size="small"
                           @click="addBrand(scope.row)" ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="suhmitForm">确 定</el-button>
      </div>
    </el-dialog>
<!--    单查的弹出层-->
    <el-dialog title="一级分类详情" :visible.sync="dialogTableVisible" center width="37%">
      二级分类：
<!--      这块是一个v-if,有值就渲染,没值就不显示-->
      <div class="HeZi" v-if="category2Data!=0">
        <el-row>
<!--          这块是一个循环,就是把值给循环出来,类似jstl的for循环-->
          <el-col :span="8" v-for="(item,i) in category2Data">
            <el-card :body-style="{ padding: '0px' }" class="scene-child-item1">
<!--              绑定图片-->
              <img :src="item.picUrl" class="image">
              <div>
<!--                绑定值-->
                <p style="text-align: center">{{ item.name }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      推荐品牌：
      <div class="HeZi" v-if="brandData!=0">
        <el-row>
          <el-col :span="8" v-for="(item,i) in brandData">
            <el-card :body-style="{ padding: '0px' }" class="scene-child-item1">
              <img :src="item.imgUrl" class="image">
              <div>
                <p style="text-align: center">{{ item.brandName }}</p>
                <div class="bottom clearfix">
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>
    </el-dialog>
<!--  修改的弹出层-->
    <el-dialog title="编辑一级分类" :visible.sync="dialogEditVisible" center width="37%">
      一级分类：
      <el-input v-model="categoryName" autocomplete="off" placeholder="请输入一级分类字段" style="width: 260px"></el-input>
      <el-button type="success" icon="el-icon-check" circle @click="editCategoryName()"></el-button>
      <br>
      二级分类：<el-button type="success" @click="addcategory2">添加</el-button>
      <!--      这块是一个v-if,有值就渲染,没值就不显示-->
      <div class="HeZi" v-if="category2DataXiuGai!=0">
        <el-row>
          <!--          这块是一个循环,就是把值给循环出来,类似jstl的for循环-->
          <el-col :span="8" v-for="(item,i) in category2DataXiuGai">
            <el-card :body-style="{ padding: '0px' }" class="scene-child-item1">
              <!--              绑定图片-->
              <img :src="item.picUrl" class="image">
              <div>
                <!--                绑定值-->
                <p style="text-align: center">{{ item.name }}</p>

              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>

      推荐品牌：<el-button type="success" @click="bianjipinpai">编辑</el-button>
      <div class="HeZi" v-if="brandDataXiuGai!=0">
        <el-row>
          <el-col :span="8" v-for="(item,i) in brandDataXiuGai">
            <el-card :body-style="{ padding: '0px' }" class="scene-child-item1">
              <img :src="item.imgUrl" class="image">
              <div>
                <p style="text-align: center">{{ item.brandName }}</p>
                <div class="bottom clearfix">
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
<!--分类的内层弹窗-->
      <el-dialog
          width="40%"
          title="添加新的二级分类"
          :visible.sync="category2Visible"
          append-to-body>

        <el-form :model="category">

          <el-form-item label="二级分类字段" :label-width="formLabelWidth" style="width: 500px">
            <el-input v-model="category2.name" autocomplete="off" placeholder="请输入二级分类字段"></el-input>
          </el-form-item>

          <el-upload
              class="avatar-uploader"
              action="/category/upload"
              name="categoryImg"
              :show-file-list="false"
              ref="upload"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :auto-upload="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">点击上传分类图片</i>
          </el-upload>
          <el-button style="margin-left: 38.5%;" size="small" type="success" @click="addItem"
                     v-if="category2.name.length!=0">添加
          </el-button>
          <el-button style="margin-left: 38.5%;" size="small" type="info" @click="alertWarning"
                     v-if="category2.name.length==0">添加
          </el-button>
          <div class="categories" v-if="category.categories.length!=0">
            <el-row>
              <el-col :span="8" v-for="(item,i) in category.categories">
                <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                  <img :src="item.picUrl" class="image">
                  <div>
                    <p style="text-align: center">{{ item.name}}</p>
                    <div class="bottom clearfix">
                      <center>
                        <el-button type="text" class="button" style="color: red;font-size: 12px" @click="delSceneChild(i)">
                          删除
                        </el-button>
                      </center>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-form>
<!--        这块是添加二级分类后的确定-->
        <el-button type="success" icon="el-icon-check" circle @click="editcategory2"></el-button>
      </el-dialog>

<!--品牌的内层弹窗-->
      <el-dialog
          width="35%"
          title="编辑分类下的品牌"
          :visible.sync="innerVisible"
          append-to-body>
        <div>
          请选择二级栏目推荐品牌：
          <el-table
              :data="brand1ById"
              height="250"
              border
              style="width:605px;">
            <el-table-column
                prop="brandCode"
                label="编号"
                width="200">
            </el-table-column>
            <el-table-column
                prop="brandName"
                label="名称"
                width="200">
            </el-table-column>
            <el-table-column
                label="操作"
                width="200">
              <template slot-scope="scope">
                <el-button type="primary" plain icon="el-icon-minus" circle size="small"
                           @click="updelBrand(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <br>
        <div>
          <el-form v-model="findBrands">
            品牌编号:
            <el-input v-model="findBrands.brandCode" style="width: 25%"></el-input>
            品牌名称:
            <el-input v-model="findBrands.brandName" style="width: 25%"></el-input>
            <el-button type="primary" plain @click="findBrandByid()">查找</el-button>
          </el-form>
        </div>
        <div>

          <el-table
              :data="brandById"
              height="250"
              border
              style="width:605px;">
            <el-table-column
                prop="brandCode"
                label="编号"
                width="200">
            </el-table-column>
            <el-table-column
                prop="brandName"
                label="名称"
                width="200">
            </el-table-column>
            <el-table-column
                label="是否关联"
                width="200">
              <template slot-scope="scope">
                <el-button type="primary" plain icon="el-icon-plus" circle size="small"
                           @click="upaddBrand(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-button type="success" icon="el-icon-check" @click="updateColumn" circle></el-button>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Category",
  data() {
    return {
      categoryData: [],//分类列表
      category2Data: [],//二级分类列表（查看用）
      category2DataXiuGai: [],//二级分类列表（修改用）
      brandData: [],//品牌对象（查看用）
      brandDataXiuGai: [],//品牌对象（修改用）
      categoryName:"",//一级分类名称（修改用）
      categoryId:"",//一级分类对象（修改用）
      page:1,
      dialogFormVisible:false,//添加弹出框的开关
      dialogTableVisible:false,//查看弹出框的开关
      dialogEditVisible:false,//修改弹出框的开关
      innerVisible:false,//品牌内层弹出框的开关
      category2Visible:false,//分类内层弹出框的开关
      formLabelWidth: '120px',
      imageUrl: "",
      //下面这块是我们要接受的json值，这个名字需要和我们实体类对应上
      //categories是我们二级的列表，需要和数据库里面的实体类的集合的名字对应上
      //category2是我们的二级的实体类，需要和数据库对应上
      //这块vue里面是不能有重名对象的,但是category又要包含下面的对象,所以就只能起一个不同名的对象
      //又因为参数绑定,vue的对象必须和实体类的对应,所以后台也只能做两个实体类
      category: {
        id:"",
        categories: [],
        name:"",
        brands: []
      },category2: {
        name: "",
        picUrl:"",
      },
      brand: [],//添加时候查询所有品牌
      brandById:[],//编辑时查询所有品牌
      brand1: [],//添加时候选择的品牌
      brand1ById:[],//编辑时选择的品牌
      //这块是查询时候带的参数
      findBrands: {
        brandCode: "",
        brandName: "",
      },
    }
  },
  methods: {
    //获取所有一级分类
    getAllCategory1() {
      //请求方式为get
      this.$axios.get("/category/getAllCategory1",{
        // params:{
        //   page:this.page
        // }
      }).then(res => {//获取返回结果
        this.categoryData = res.data.data;
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
    },
    //开关方法
    alterSwitch(row) {
      console.log(row)
      //请求方式为post
      this.$axios.post("/category/alterSwitch",
          {
            id: row.id,
            status: row.status
          }).then(res=>{
        this.$message({
          type: 'success',
          message: '你成功修改了显示!'
        });
      })
    },
    deleteCategoryById(id) {
      this.$confirm('确定要删除该分类？', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        //删除一级分类
        this.$axios.delete("/category/deleteCategoryById", {
          params: {//发送请求
            id: id
          }
        }).then(res => {
          if (res.data.code == 200){
            this.getAllCategory1()//因为这块用的分页，所以必须调分页查询方法
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    //分页的方法
    handleCurrentChange(val){
      this.page=val
      this.getAllCategory1()
    },
    //添加的弹窗
    tianjiaTanChuang() {
      this.category.name = ""
      this.category.categories = []
      this.brand = []
      this.brand1 =[]
      this.dialogFormVisible = true //将弹出层设置为弹出
      this.findBrand()
    },
    //查看的弹窗
    chaKan(id){
      this.dialogTableVisible = true
      //请求方式为get
      this.$axios.get("/category/getAllCategory2",{
        params:{
          id:id
        }
      }).then(res => {//获取返回结果
        this.category2Data = res.data.data;
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
      //请求方式为get
      this.$axios.get("/category/getBrandById",{params:{id:id}}).then(res => {//获取返回结果
        this.brandData = res.data.data;
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
    },
    //修改的弹窗
    xiuGai(row){
      this.categoryId = row.id
      this.categoryName = row.name
      this.dialogEditVisible = true
      //请求方式为get
      this.$axios.get("/category/getAllCategory2",{
        params:{
          id:row.id
        }
      }).then(res => {//获取返回结果
        this.category2DataXiuGai = res.data.data;
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
      //请求方式为get
      this.$axios.get("/category/getBrandById",{
        params:{
          id:row.id
        }
      }).then(res => {//获取返回结果
        this.brandDataXiuGai = res.data.data;
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
    },
    //编辑品牌的按钮
    bianjipinpai(){
      this.innerVisible = true
      this.findBrandsByid(this.categoryId)
    },
    findBrandsByid(id){
      this.$axios({
        method: "get",
        url: "/category/findBrandsByid",
        params: {
          id: id
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.brand1ById = res.data.data
          this.findBrandByid()
        }
      })
    },
    //调这个方法
    findBrandByid(){
      this.$axios({
        method: "post",
        url: "Column/findBrand",
        data: this.findBrands
      }).then(res => {
        this.brandById = []
        let bool;
        if (res.data.code == 200) {
          if (this.brand1ById.length > 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              for (let j = 0; j < this.brand1ById.length; j++) {
                bool = true;
                if (res.data.data[i].id == this.brand1ById[j].id) {
                  bool = false
                }
              }
              if (bool) {
                this.brandById.push(res.data.data[i]);
              }

            }
          } else {
            this.brandById = res.data.data
          }
          console.log(this.brandById)
        }
      })

    },
    //修改分类名
    editCategoryName(){
      //请求方式为get
      this.$axios.get("category/updateCategoryName",{
        params:{
          id:this.categoryId,
          name:this.categoryName
        }
      }).then(res => {//在这块调用全查方法关闭弹窗
        this.dialogEditVisible = false
        this.getAllCategory1()
        this.$message({
          message: '恭喜你，一级分类名称修改成功！！！',
          type: 'success'
        });
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.category2.picUrl = res.data
      }

    },
    handleChange(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // this.upFile.append("file",fileList)
      this.fileList = fileList
      console.log(this.fileList)
    },
    alertWarning() {
      alert("请输入二级分类名称")
    },
    //添加图片的方法
    addItem() {
      if (this.imageUrl.length != 0){
        this.category2.picUrl = this.imageUrl
        this.imageUrl = ""
        if (this.category.categories.length < 6) {
          this.category.categories.push(this.category2)
          this.category2 = {name: "", picUrl: ""}
        } else {
          this.category2 = {name: "", picUrl: ""}
          alert("最多添加6个")
          return
        }
      }else {
        alert("请选择图片")
      }
    },
    //添加弹出框的确定按钮
    suhmitForm() {
      this.category.brands = this.brand1
      console.log(this.category)
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });
      this.$axios({
        method: "post",
        url: "scene/upload",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
            if(res.data.code == 200){
              for (let i = 0; i < this.category.categories.length; i++) {
                this.category.categories[i].picUrl = res.data.data[i]
              }this.$axios({
                method:"post",
                url:"category/addCategory",
                data:this.category
              }).then(res=>{
                if (res.data.code==200) {
                  this.$message({
                    type: 'success',
                    message: '成功创建分类!'
                  });
                  this.dialogFormVisible = false
                  this.getAllCategory1();
                }
              })
            }
          }
      )
    },
    //查询所有品牌，还有品牌的模糊查都在这
    //后台用的动态sql，有品牌编号和品牌名称就根据品牌编号和名称做，没有就是全查
    findBrand() {
      this.$axios({
        method: "post",
        url: "/Column/findBrand",
        data: this.findBrands//这块带的是品牌编号还有品牌名称
      }).then(res => {
        let bool;//定义变量保龄球
        if (res.data.code == 200) {//判断回来的响应码是不是200
          if (this.brand1.length > 0) {//如果返回来的品牌列表不为空就进入
            for (let i = 0; i < res.data.data.length; i++) {
              for (let j = 0; j < this.brand1.length; j++) {
                bool = true;
                //剔除掉我们已经选择了的品牌
                if (res.data.data[i].brandCode == this.brand1[j].brandCode) {
                  bool = false
                }
              }//这块就是判断是不是这个保龄球变量是不是为真，为真就赋值给brand
              if (bool) {
                this.brand.push(res.data.data[i]);
              }

            }
          } else {
            this.brand = res.data.data
          }

        }
      })

    },
    //添加时候列表的那个加号按钮的方法
    addBrand(data) {
      let index = this.brand.indexOf(data)
      console.log(index)
      this.brand.splice(index, 1)
      this.brand1.push(data)
    },
    //添加时候列表的减号按钮的方法
    delBrand(data) {
      let index = this.brand1.indexOf(data)
      this.brand1.splice(index, 1)
      this.brand.push(data)
    },
    //修改时候列表的加号按钮的方法
    upaddBrand(data) {
      let index = this.brandById.indexOf(data)
      console.log(index)
      this.brandById.splice(index, 1)
      this.brand1ById.push(data)
    },
    //修改时候列表的减号按钮的方法
    updelBrand(data) {
      let index = this.brand1ById.indexOf(data)
      this.brand1ById.splice(index, 1)
      this.brandById.push(data)
    },
    //修改提交的方法
    updateColumn(){
      this.category.brands = this.brand1ById
      this.category.id = this.categoryId
      this.$axios({
        method: "post",
        url: "category/updateCb",
        data: this.category

      }).then(res => {
        if (res.data.code == 200) {
          this.innerVisible = false
          this.dialogEditVisible = false
          this.brand1ById = []
          this.category = {}
          this.category.categories=[]
          this.findBrands = {}
          this.getAllCategory1()

        } else {
          alert("修改失败")
          // this.innerVisible = false
          // this.dialogEditVisible = false
          // this.getAllCategory1()
        }
      })

    },
    //添加二级分类的按钮的方法
    addcategory2(){
      this.category.categories = []
      this.category2Visible=true
    },
  //  添加二级分类的确定方法
    editcategory2(){
      this.category.brands = this.brand1
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });
      this.$axios({
        method: "post",
        url: "scene/upload",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        this.category.id = this.categoryId
            if(res.data.code == 200){
              for (let i = 0; i < this.category.categories.length; i++) {
                this.category.categories[i].picUrl = res.data.data[i]
              }this.$axios({
                method:"post",
                url:"category/addCategoryBy1",
                data:this.category
              }).then(res=>{
                if (res.data.code==200) {
                  this.$message({
                    type: 'success',
                    message: '成功创建分类!'
                  });
                  this.dialogEditVisible = false
                  this.category2Visible = false
                  this.getAllCategory1();
                }
              })
            }
          }
      )
    }
  },
  created() {
    this.getAllCategory1()
  },
}
</script>

<style scoped>
.HeZi {
  width: 80%;
  height: 50%;
  border: 1px none #000000;
  margin: 0 auto;
}
.scene-child-item1 {
  width: 100px;
  height: 130px;
}
</style>
